<template>
	<view class="container">
		<view class="title-line">
			<view class="title">修改密码</view>
			<uni-icons type="closeempty" size="1.8vw" color="#999" @click="close"></uni-icons>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="label">请输入原密码</view>
				<input type="password" v-model="formData.currentPassword" placeholder="请输入原密码">
			</view>
			<view class="form-item">
				<view class="label">请输入新密码</view>
				<input type="password" v-model="formData.newPassword" placeholder="6-14位数字和字母，区分大小写">
			</view>
			<view class="form-item">
				<view class="label">请确认新密码</view>
				<input type="password" v-model="formData.newPassword2" placeholder="再次输入新密码">
			</view>
		</view>

		<view class="button-container">
			<view class="button" @click="close">取消</view>
			<view class="button theme"
				:class="{disabled: !(formData.currentPassword && formData.newPassword && formData.newPassword2) }"
				@click="submit">
				确定
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					currentPassword: "",
					newPassword: "",
					newPassword2: "",
				},
			}
		},
		methods: {
			close() {
				this.$emit("close")
			},
			submit() {
				if (this.formData.newPassword2 != this.formData.newPassword) {
					return uni.showToast({
						icon: "none",
						title: "两次新密码不相同",
					})
				}
				this.axios
					.post("/api/services/app/User/ChangePassword", {
						currentPassword: this.formData.currentPassword,
						newPassword: this.formData.newPassword
					})
					.then((data) => {
						uni.showToast({
							title: "修改成功",
							duration: 3000
						})
						this.close();
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 0.1vw 0.3vw;
		border-radius: 0.8vw;
		box-sizing: border-box;
		padding: 2vw;
	}

	.title-line {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 1.4vw;
			font-weight: bold;
		}
	}

	.form {

		.form-item {
			margin-top: 2vw;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 2vw;

			.label {
				color: #333;
				margin-right: 1.5vw;
			}

			input {
				width: 20vw;
				border: 0.1vw solid #ccc;
				border-radius: 0.2vw;
				padding: 0.5vw 0.5vw;
				font-size: 1.2vw;
			}
		}
	}

	.button-container {
		display: flex;
		justify-content: end;
		margin-top: 2vw;

		.button {
			font-size: 1.3vw;
			color: #000;
			width: 7vw;
			height: 2.8vw;
			background-color: #fff;
			border: 0.1vw solid #ccc;
			border-radius: 0.4vw;
			display: flex;
			align-items: center;
			justify-content: center;

			&.theme {
				background-color: #247FE8;
				border-color: #247FE8;
				color: #fff;
			}
			
			&.disabled {
				background-color: #EAEAEA;
				border-color: #EAEAEA;
				color: #fff;
				pointer-events: none;
			}

			&+.button {
				margin-left: 1.5vw;
			}
		}
	}
</style>